[Day24]調整元素周圍的留白

2022 iThome 鐵人賽

DAY 24

自我挑戰組

學習HTML&CSS的30天系列第 24 篇

14th鐵人賽

沒魚

2022-10-09 23:58:33

1783 瀏覽

分享至

今天要學習的是留白，所謂留白並不是毫無意義的空白，
而是讓元素之間保留「間隙」的「空間」。
留白其實是很重要的設計元素，能讓畫面變得更容易瀏覽，
也能使文章變得更容易閱讀喔！

認識留白

首先來認識與留白有關的「margin」與「padding」屬性。
假設下圖的四邊形代表網頁元素，元素的邊緣稱為「border」。
「margin」俗稱「外距」，是從 border 到其他元素的距離；
「padding」俗稱「內距」，是從 border 到內部(內容)的距離。
用「margin」屬性設定元素外側的留白空間

「margin」屬性可在元素的四邊加上留白空間(和其他元素的距離)，
可分別利用「margin-top(上)」、「margin-bottom(下)」、「margin-left(左)」、「margin-right(右)」這四種屬性，控制要在哪一邊加上留白空間。

主要的設定方式

設定方法說明

數值|在數值加上「px」、「rem」、「%」等單位
auto|根據相關的屬性值自動設定

實際畫面

只設定 margin 屬性時，可一次套用到上下左右四邊；
如果用半形空格分隔，可設定上下與左右的留白，或依照上、右、下、左(順時針)的順序統一設定。
請參考下表。

寫法範例

margin: 四邊;|margin: 10px;
margin: 上下左右;|margin: 10px 20px;
margin: 上左右下;|margin: 10px 20px 30px;
margin: 上右下左;|margin: 10px 20px 30px 40px;

因此，假如要在元素的上方加上 30px、左邊加上 100px 的留白時，
就可以只用「margin」屬性設定，描述方式如下圖。
用「padding」屬性設定元素內側的留白

如果想在元素內側加上留白，就要使用 padding 屬性。
和 margin 屬性一樣，padding 屬性可在元素的四邊設定「margin-top(上)」、「margin-bottom(下)」、「margin-left(左)」、「margin-right(右)」等要留白的位置；
只要用半形空格分隔，就能設定上下與左右的留白，或依上、右、下、左(順時針)的順序統一設定。

主要的設定方式

設定方法說明

數值|在數值加上「px」、「rem」、「%」等單位
auto|根據相關的屬性值自動設定

實際畫面
- 藍色方塊的邊框與內容(文字)間產生了 40px 的留白。
活用留白可以將元素分組

留白不僅能給元素更多空間、提高易讀性，還有將元素「區隔」和「分組」的功能。
舉例來說，我們通常會認為位置相近的物件就是「有關聯」。
請看下圖的排版範例。

上面的範例乍看之下，很容易會看成「美麗的垃圾」、「花骯髒的」。為什麼呢？

這是因為我們會自動把位置接近的文字視為同一個群組。
因此在排版時，一定要避免把無關的資料放在一起，這是非常重要的關鍵。
這時候，就可以利用留白來區隔。

如上圖所示，只要調整留白的比例，讓相關的文字距離更近、無關的文字距離更遠，
這樣就能自然辨識為「美麗的花」與「垃圾骯髒的」了。
```
Point
-----
利用留白可以將相關的資料分成同組。
```
接著我們再思考圖片、文字與留白的關係。下面的圖說文字是每張花卉照片的名稱，
但是目前的安排會讓人覺得「很難看懂花卉名稱到底是屬於上面還是下面的照片」。

這種情況也可以善用留白來分組。
在不同的群組間插入留白，讓具有關聯性的照片與文字變成同一組，
每個群組之間都要有足夠的留白，並避免讓無關聯的資料太過接近。
修改的結果如下圖所示，「夏菫」與「玫瑰」到底是指哪一種花，變得一目了然。
建議在邊框與文字之間加入留白

設計網頁的內文時，如果文字和邊框間沒有距離，會變得很難閱讀，而且也不好看。
有的人可能會說「很擠也沒關係，只要放的進去就好」，但如果想設計好作品，就不能這樣想。
我們必須思考對瀏覽網頁的使用者而言，怎樣設計留白區域才會更容易閱讀。
運用 CSS 的 padding 屬性，就可以在元素內容(文字)和遍框之間加上留白。

padding 的設定依文字大小而異，以內文來說，建議至少為文字大小的 1~1.5倍。
假設內文的文字大小為 16px，建議加上 20px 左右的留白，會變得更清楚易讀。

除了內文之外，標題等較短的句子也一樣，建議在文字四周保留較大的空間。